<template>
  <a-drawer
    :visible="visible"
    cancel-text="关闭"
    ok-text="全部已读"
    :width="400"
    :unmount-on-close="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>
      <a-link @click="allMessage">全部消息</a-link>
    </template>
    <div>
      <a-spin style="display: block" :loading="loading">
        <a-result v-if="!renderList.length" status="404">
          <template #subtitle>暂无内容</template>
        </a-result>
        <List
          :render-list="renderList"
          :unread-count="unreadCount"
          @handle-callback="handleCallback"
        />
      </a-spin>
    </div>
  </a-drawer>
</template>

<script setup>
  import { ref, reactive, toRefs, computed, inject } from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';

  import useLoading from '@/hooks/loading';
  import tool from '@/utils/tool';
  import { apiList, apiHandle } from '@/api/message';
  import List from './list.vue';

  const { loading, setLoading } = useLoading(true);
  const { t } = useI18n();
  const router = useRouter();
  // const messageType = ref('message');
  // const messageType = ref(0);
  const messageData = reactive({
    renderList: [],
    messageList: [],
  });
  toRefs(messageData);

  const visible = ref(false);
  // 未读消息
  const countUnreadMsg = ref(tool.local.get('count_unreadmsg') ?? 0);
  // 刷新
  const reload = inject('reload');

  // 所有消息列表
  async function fetchData() {
    visible.value = true;
    setLoading(true);
    try {
      const { data } = await apiList({
        page: 1,
        limit: 20,
        status: 0,
      });
      messageData.messageList = data.data;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  }
  // 标记已读
  async function readMessage(data) {
    const ids = data.map((item) => item.id);
    await apiHandle({ ids, status: 1 });
    fetchData();
  }
  // 当前类型的消息列表
  const renderList = computed(() => {
    const data = messageData.messageList;
    return data;
  });
  // 当前类型的消息列表未读条数
  const unreadCount = computed(() => {
    return renderList.value.filter((item) => !item.status).length;
  });
  // 清空
  // const emptyList = () => {
  //   messageData.messageList = [];
  // };
  const allMessage = () => {
    visible.value = false;
    router.push({ name: 'Adminlog' });
  };
  const handleCancel = () => {
    visible.value = false;
    if (countUnreadMsg.value !== messageData.messageList.length) {
      countUnreadMsg.value = messageData.messageList.length; // 更新头部的徽标数无效
      reload(); // 刷新才能更新头部的徽标数
    }
  };
  // 全部已读
  const handleOk = async () => {
    readMessage(renderList.value);
  };

  // 回调
  const handleCallback = (items) => {
    if (renderList.value.length) {
      readMessage([...items]);
    }
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">
  :deep(.arco-popover-popup-content) {
    padding: 0;
  }

  :deep(.arco-list-item-meta) {
    align-items: flex-start;
  }
  :deep(.arco-tabs-nav) {
    padding: 14px 0 12px 16px;
    border-bottom: 1px solid var(--color-neutral-3);
  }
  :deep(.arco-tabs-content) {
    padding-top: 0;
    .arco-result-subtitle {
      color: rgb(var(--gray-6));
    }
  }
</style>
